<template>
  <div class="access">
    <div class="search-access">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="formInline"
      >
        <el-form-item label="IP" prop="ip">
          <el-input
            v-model="formInline.ip"
            placeholder="请输入IP地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="UA" prop="userAgent">
          <el-input
            v-model="formInline.userAgent"
            placeholder="请输入User Agent"
          ></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="formInline.url" placeholder="请输入URL"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="formInline.address"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="浏览器" prop="browser">
          <el-input
            v-model="formInline.browser"
            placeholder="请输入浏览器"
          ></el-input>
        </el-form-item>
        <el-form-item label="内核" prop="engine">
          <el-input
            v-model="formInline.engine"
            placeholder="请输入内核"
          ></el-input>
        </el-form-item>
        <el-form-item label="OS" prop="os">
          <el-input
            v-model="formInline.os"
            placeholder="请输入操作系统"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备" prop="device">
          <el-input
            v-model="formInline.device"
            placeholder="请输入设备"
          ></el-input>
        </el-form-item>

        <el-form-item class="operate">
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-access">
      <!-- 头部 -->
      <div class="table-header">
        <el-button type="danger" v-show="isOpen" @click="delViews"
          >删除</el-button
        >
        <el-button style="border:none" v-if="!isOpen"></el-button>
        <el-button>刷新</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" @select="select">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="url" label="URL" width="200">
          <template slot-scope="scope">
            <a :href="scope.row.url">{{ scope.row.url }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="120"> </el-table-column>
        <el-table-column prop="browser" label="浏览器" width="120">
        </el-table-column>
        <el-table-column prop="engine" label="内核" width="120">
        </el-table-column>
        <el-table-column prop="os" label="操作系统" width="150">
        </el-table-column>
        <el-table-column prop="device" label="设备" width="100">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="100">
        </el-table-column>
        <el-table-column prop="count" label="访问量" width="100">
          <template slot-scope="scope">
            <span class="count">{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_at" label="访问时间" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <div class="operate">
              <el-button type="text" size="small" @click="delView(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="currentChange"
        :page-size="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        ip: "", //ip
        userAgent: "",
        url: "", //URL
        count: "", //访问量
        address: "", //地址
        browser: "", //浏览器
        engine: "", //内核
        os: "", //操作系统
        device: "", //设备
      },
      tableData: [],
      pageIndex: 1,
      pageSize: 8,
      total: 0,
      isOpen: false,
      selection: [],
    };
  },
  created() {
    this.getViewList();
  },
  methods: {
    onSubmit() {
      this.getViewList();
    },
    // 点击多选框的时候
    select(selection, row) {
      // 判断selecttion的长度，如果大于0，让isOpen为true
      this.isOpen = Boolean(selection.length);
      this.selection = selection;
    },
    // 多选删除
    delViews() {
      this.$api
        .delViews({
          selection: this.selection,
        })
        .then((res) => {
          if (res.success) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getViewList();
            // 更新
            // 判断selecttion的长度，如果大于0，让isOpen为true
            this.selection = selection;
            this.isOpen = Boolean(this.selection.length);
          }
        });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    delView(id) {
      this.$api
        .delView({
          id,
        })
        .then((res) => {
          if (res.success) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getViewList();
          }
        });
    },
    // 获取用户列表
    getViewList() {
      this.$api
        .getViewList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          ...this.formInline,
        })
        .then((res) => {
          // 处理时间的格式
          res.data.data.forEach((item) => {
            item.create_at = item.create_at.split("T")[0];
          });
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 分页页码改变
    currentChange(index) {
      this.pageIndex = index;
      this.getViewList();
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.access {
  width: 100%;
  background-color: #eff2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .search-access {
    width: 95%;
    height: 200px;
    background-color: #fff;
    margin-top: 20px;
    .el-form {
      display: flex;
      height: 200px;
      flex-wrap: wrap;

      .el-form-item {
        width: 25%;
        margin: 0;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;
      }
      .operate {
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: flex-end;
      }
    }
  }
  .table-access {
    width: 95%;
    background-color: #fff;
    margin-top: 20px;
    /*滚动条样式*/
    ::-webkit-scrollbar {
      /* width: 4px; */
      height: 8px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #dadada;
    }
    ::-webkit-scrollbar-track {
      border-radius: 0;
    }
    .table-header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .el-button {
        height: 40px;
      }
    }
    .cell {
      span.count {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: #fff;
        background-color: #52c41a;
      }
      .state-box {
        display: flex;
        align-items: center;
        span {
          width: 10px;
          height: 10px;
          background-color: #faad14;
          margin-right: 5px;
          border-radius: 50%;
        }
        span.active {
          background-color: #5bc726;
        }
      }
    }
    .el-pagination {
      display: flex;
      justify-content: end;
    }
  }
}
</style>